<template>
	<gui-page>
		<template v-slot:gBody>
			<view 
			class="gui-bg-white gui-margin-top">
			<checkbox-group @change="checkboxChange">
				<view 
				class="drag-list" 
				@touchmove.stop.prevent="thMoveS">
					<view 
					v-for="(item, index) in lists" 
					:key="item.id" 
					:style="{
					transform:'translateY('+lists[index].y+'px) translateZ('+(index == movingIndex ? '120px' : '0px' )+')',
					position:lists[index].y != 0 ? 'absolute' : 'relative', 
					paddingTop:index==preIndex?'20px':'0', 
					opacity:index == movingIndex ? 0.9 : 1}" 
					@touchstart="thStart" 
					@touchmove="thMove" 
					@touchend="thEnd" 
					class="drag-list-item" 
					@longpress="longtap" 
					:data-index="index" 
					:id="'draglist'+index">
					<checkbox @click="changeCheck" :data-id="item.id" style="transform: scale(0.7)" color="#07c160" :value="item.id.toString()" :checked="item.is_gouxuan==1" />
						<view class="drag-list-content gui-primary-text">{{item.title}}</view>
						<view 
						class="drag-list-icon gui-icons" 
						:class="[index==movingIndex?'gui-primary-color':'gui-color-gray']">&#xe727;</view>
					</view>
				</view>
				</checkbox-group>
			</view>
		</template>
	</gui-page>
</template>
<script>
import graceJS from '@/Grace6/js/grace.js';
import {shuju_listsApi,shuju_add_delApi,shuju_lists_weighApi} from '@api/test.js';
import { Local } from '@utils/storage.js';
export default {
	data(){
		return {
			currentSelect:'1',
			lists : [],
			movingIndex : -1,
			preIndex    : -1,
			dragTimer   : null,
			moveStartY  : 0,
			pageScrollTop   : 0,
			pageScrollTimer : null
		}
	},
	onLoad : function(){
		let id = Local.get('selectplotIdtest').id;
		shuju_listsApi({shiyan_id:id}).then(res=>{
			let demoData = res.data;
			for(let i = 0; i < demoData.length; i++){
				demoData[i].y = 0;
				demoData.splice(i,1,demoData[i]);
			}
			this.lists = demoData;
		})
	},
	onPageScroll:function(e){
		clearTimeout(this.pageScrollTimer);
		this.pageScrollTimer = setTimeout(()=>{
			this.pageScrollTop = e.scrollTop;
		}, 200);
	},
	methods:{
		async changeCheck(e){
			let id = e.currentTarget.dataset.id;
			let res = await shuju_add_delApi({id});
			if(res.code==1){
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}
		},
		checkboxChange(e){
			if(e.detail.value.length){
				e.detail.value.map(item=>{
					this.lists.forEach(child=>{
						if(child.id==item){
							child.checked = 1
						}
					})
				})
			}else{
				this.lists.forEach(item=>{
					item.checked = 0;
				})
			}
		},
		// 长按后才能进行拖拽
		longtap:function(e){
			this.movingIndex = Number(e.currentTarget.dataset.index);
			this.preIndex = -1;
		},
		thStart:function(e){
			this.moveStartY = Number(e.touches[0].pageY);
		},
		// 移动进行拖拽
		thMove : function(e){
			if(this.movingIndex == -1){return ;}
			var moveY = Number(e.touches[0].pageY) - this.moveStartY;
			if(moveY < -30 && this.preIndex < this.movingIndex){moveY -= 20;}
			this.lists[this.movingIndex].y = moveY;
			this.lists.splice(this.movingIndex, 1, this.lists[this.movingIndex]);
			this.moveBase();
		},
		thMoveS  : function (e) {
			if(this.movingIndex == -1){
				var moveY          = Number(e.touches[0].pageY) - this.moveStartY;
				moveY              *= -1;
				this.pageScrollTop = this.pageScrollTop  + moveY;
				if(this.pageScrollTop < 0){this.pageScrollTop = 0;}
				uni.pageScrollTo({
					scrollTop : this.pageScrollTop,
					duration  : 0
				});
			}
		},
		moveBase : function () {
			if(this.dragTimer != null){return ;}
			this.dragTimer = 1;
			setTimeout(()=>{this.dragTimer = null;}, 100);
			graceJS.selectAll('.drag-list-item', (resIn)=>{
				if(!resIn){return ;}
				graceJS.select('#draglist'+this.movingIndex, (res)=>{
					if(!res){return ;}
					// 上下移动
					var currentTop   = res.top;
					for(let i = 0; i < resIn.length; i++){
						if(i != this.movingIndex){
							var top = resIn[i].top;
							if(currentTop < top){
								this.preIndex = i;
								break;
							}else{
								this.preIndex = this.lists.length;
							}
						}
					}
				});
			});
		},
		async saveSort(dragData){
			let tmpData = dragData.slice();
			tmpData.reverse().forEach((item,idx)=>{
				let weigh = idx+1
				item.weigh = weigh
			})
			let res = await shuju_lists_weighApi({data:JSON.stringify(tmpData)})
		},
		// 拖拽完成 完成后 lists 数组会被重新排序
		thEnd : function (e) {
			if(this.movingIndex == -1 || this.preIndex == -1){
				this.movingIndex = -1;
				this.preIndex = -1;
				return ;
			}
			this.lists[this.movingIndex].y = 0;
			var dragData = JSON.stringify(this.lists);
			dragData     = JSON.parse(dragData);
			if(this.movingIndex > this.preIndex){
				var dropOrder = dragData.splice(this.movingIndex, 1);
				dragData.splice(this.preIndex, 0 , dropOrder[0]);
			}else{
				dragData.splice(this.preIndex, 0 , dragData[this.movingIndex]);
				dragData.splice(this.movingIndex, 1);
			}
			this.$nextTick(()=>{
				this.movingIndex = -1;
				this.$nextTick(()=>{
					this.preIndex    = -1;
					this.$nextTick(()=>{
						this.lists    = dragData;
						this.saveSort(dragData)
						this.$nextTick(()=>{
							this.movingIndex = -1;
							this.preIndex = -1;
						})
					})
				});
			});
		}
	}
}
</script>
<style scoped>
.drag-list{padding-left:25rpx; transform-style:preserve-3d; position:relative;}
.drag-list-item{display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center;}
.drag-list-order{width:50rpx; text-align:center; margin:0 10px; flex-shrink:0; font-size:36rpx; font-style:italic;}
.drag-list-icon{width:60rpx; line-height:60rpx; flex-shrink:0; font-size:36rpx;}
/* .drag-list-img{width:66rpx; height:66rpx; flex-shrink:0; font-size:36rpx; border-radius:60rpx;} */
.drag-list-content{width:700rpx; line-height:120rpx; font-size:28rpx; margin-left:20rpx;}
</style>